import React,{ useState, useEffect } from 'react'
import './marketfair.css'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
import { NavBar, SearchBar, Toast, Space,Button } from 'antd-mobile'
export default function Marketfair() {
    const navigate = useNavigate()
    const back = () =>
    {
        navigate(-1)
    }
    const [commodity,setcommodity] = useState([])
    const getcommodity = () =>{
        axios.get('http://localhost:3000/getcommodity').then((res=>{
            if(res.data.code==200){
                console.log(res.data)
                setcommodity(res.data.data)
            }    
        }))
    }
    const search = (value) => {
        navigate(`/searchfair`,{
            state:{
                value:value
            }
        })
    }
    const StoreDetails = (data)=>{
        navigate('/storedetails',{
            state:{
                data:data
            }
        })
    }
    useEffect(() => {
        getcommodity()
    },[])
    return (
        <div className='marketfair'>
            <div className='fair_top'>
                <div className='fair_nav'>
                        <NavBar left={<div className='nav_left'>市集</div>} onBack={back} >
                        <SearchBar  onSearch={(e)=>{search(e)}} placeholder='寻找商品' searchIcon={<img src="https://cdn8.axureshop.com/demo2024/2322481/images/%E9%A6%96%E9%A1%B5/u106.svg"></img>}
                         style={{
                                width: '99%',
                                '--height': '2.5rem',
                                '--border-radius': '2rem',
                            }}/>
                        </NavBar>
                </div>
                <div className='fair_banner'>
                    <div className='fair_banner_item'>
                        <img src="https://cdn8.axureshop.com/demo2024/2322481/images/%E9%80%9B%E5%B8%82%E9%9B%86/u1378.svg"></img>
                        <p>我的订单</p>
                    </div>
                    <div className='fair_banner_item'>
                    <div className='fair_banner_item_icon' style={{
                            backgroundImage: 'url(../../../public/fair/fair_b.png)',
                        }}></div>
                        <p>购物车</p>
                    </div>
                    <div className='fair_banner_item'>
                        <div className='fair_banner_item_icon' style={{
                            backgroundImage: 'url(../../../public/fair/fair_a.png)',
                        }}></div>
                        
                        <p>购物信息</p>
                    </div>
                    <div className='fair_banner_item' onClick={()=>{
                        navigate('/ConcernShop')
                    }}>
                        <img src="https://cdn8.axureshop.com/demo2024/2322481/images/%E9%80%9B%E5%B8%82%E9%9B%86/u1391.svg"></img>
                        <p>关注店铺</p>
                    </div>
                </div>
            </div>
            <div className='fair_content'>
                <p className='fair_content_title'>市集推荐</p>
                <div className='fair_context'>
                        {
                            commodity.map((item,index)=>{
                                return(
                                    <div className='fair_context_item' onClick={()=>{StoreDetails(item)}} key={index}>
                                        <img src={item.img}></img>
                                        <p className='fair_context_item_name'>{item.name}</p>
                                        <div className='fair_context_item_price'>
                                        <p>￥{item.nowPrice}</p>
                                        <p className='fair_context_item_sold'>已售{item.sold}</p>
                                        </div>
                                    </div>
                                )
                            })
                        }
                </div>
            </div>
        </div>
    )
}
